<template>
    <div class="merchandise-management views-container">
    <div class="wlm-table">
         <div class="wlm-table-hearder-btn" >
             <el-button size="small" type="primary" @click="dialogFormVisible=true">添加票务商品</el-button>
               <router-link class="wlm-text" tag="span" :to="{path:'/application/ticketingmeryin'}">
                <el-button size="small" type="primary">添加银科环企票务商品</el-button>
            </router-link>
         </div>
         <div class="wlm-table-header">
              <el-form :model="tableFormatData.ticketingmer.files" size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="商务ID：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.ticketingmer.files.info_id" placeholder="请输入商务ID" style="width:160px;"></el-input>
                    </el-form-item>
                    <el-form-item label="标题：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.ticketingmer.files.goods_name" placeholder="请输入标题" style="width:160px;"></el-input>
                    </el-form-item>
                </el-form-item>
                  <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
               </el-form>
         </div>
         <el-dialog @close="resetDialogFormData({  type:'',
                    ticket_id:'',
                    goods_name:'',
                    info_id:'',
                    n:'',
                    id_card:2,
                    refund:2,
                    real_name:2,
                    pre_sale:2,
                    pre_sale_time_start:'',
                    pre_sale_time_end:'',
                    express:2 })" :visible.sync="dialogFormVisible" custom-class="reset-pwd wlm-form-dialog dialog-table">
            <div  class="wlm-form" v-if="dialogFormVisible">
              <div class="wlm-form-header wlm-dialog-fixheader">
              <span class="wlm-dialog-inlenr">添加票务商品</span>
            </div>
             <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="wlm-form-content">
          <div class="wlm-dialog-main">
            <div class="wlm-dialog-content">
              <el-form  :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules"  size="small" label-width="100px" class="retail-form" label-position="right">
                <el-form-item label="商品名称" prop="goods_name">
                 <el-input placeholder="请输入商品名称" v-model.trim="formFormatData.formData.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="门票类型" prop="type">
                   <el-select v-model.trim="formFormatData.formData.type" placeholder="请选择" style="width:200px;" @change="getTicketbtn" :disabled="formFormatData.formData.id?true:false">
                            <el-option :label="'自我游'" :value="1">
                            </el-option>
                            <el-option :label="'天时同城'" :value="2">
                            </el-option>
                              <el-option :label="'银科环企'" :value="3" :disabled="true">
                            </el-option>
                              <el-option :label="'票付通'" :value="4">
                            </el-option>
                        </el-select>
              </el-form-item>
              <el-form-item label="选择商家" prop="ticket_id">
                    <el-select v-model.trim="formFormatData.formData.ticket_id" placeholder="请选择" style="width:200px;" :disabled="formFormatData.formData.id?true:false">
                            <el-option v-for="item in tableridata" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
              </el-form-item>
            
              <el-form-item label="门票ID" prop="info_id">
                 <el-input placeholder="请输入门票ID" v-model.trim="formFormatData.formData.info_id" :disabled="formFormatData.formData.id?true:false"></el-input>
              </el-form-item>
              <!-- 这里拿门票ID做判断，是因为产品ID做判断时会出现新增的时候填了就禁用 -->
                 <el-form-item label="产品ID" prop="n" v-if="formFormatData.formData.type==4">
                 <el-input placeholder="请输入产品ID" v-model.trim="formFormatData.formData.n" :disabled="formFormatData.formData.id?true:false"></el-input>
              </el-form-item>
             <!-- <el-form-item label="是否需要身份证" prop="id_card">
                  <el-input placeholder="请输入内容" v-model.trim="formFormatData.formData.name"></el-input> 
                    <el-radio-group v-model="formFormatData.formData.id_card">
                        <el-radio :label="1">需要</el-radio>
                        <el-radio :label="2">不需要</el-radio>
                    </el-radio-group>
              </el-form-item>
               <el-form-item label="是否可退款" prop="refund">
                   <el-radio-group v-model="formFormatData.formData.refund">
                        <el-radio :label="1">需要</el-radio>
                        <el-radio :label="2">不需要</el-radio>
                    </el-radio-group>
              </el-form-item> -->
             <!-- <el-form-item label="是否实名制" prop="real_name">
                   <el-radio-group v-model="formFormatData.formData.real_name">
                        <el-radio :label="1">需要</el-radio>
                        <el-radio :label="2">不需要</el-radio>
                    </el-radio-group>
              </el-form-item> -->
              <!-- <el-form-item label="是否预售" prop="pre_sale">
                   <el-radio-group v-model="formFormatData.formData.pre_sale">
                        <el-radio :label="1">需要</el-radio>
                        <el-radio :label="2">不需要</el-radio>
                    </el-radio-group>
              </el-form-item> -->
                <!-- <el-form-item label="预售时间" prop="pre_sale" v-if="formFormatData.formData.pre_sale==1">
                  <el-date-picker
                    v-model="formFormatData.formData.pre_sale_time_start"
                    type="date"
                    placeholder="选择开始日期">
                    </el-date-picker>- <el-date-picker
                    v-model="formFormatData.formData.pre_sale_time_end"
                    type="date"
                    placeholder="选择结束日期">
                    </el-date-picker>
              </el-form-item> -->
             <!-- <el-form-item label="是否开启快递" prop="pre_sale">
                   <el-radio-group v-model="formFormatData.formData.express">
                        <el-radio :label="1">需要</el-radio>
                        <el-radio :label="2">不需要</el-radio>
                    </el-radio-group>
              </el-form-item> -->
            </el-form>
            </div>
          </div>
        </div>
             </el-scrollbar>
            </div>
            <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
                <!-- @click="formFormatSubmit" -->
              <el-button size="small"  @click="savebtn" type="primary">保存</el-button>
            </footer>
        </el-dialog>
         <div class="wlm-table-content">
              <el-table style="width:100%" :ref="tableFormatData.ticketingmer.key"
                    :data="tableFormatData.ticketingmer.tableData"
                    @selection-change="handleSelectionChange">
                     <el-table-column  prop="avatarUrl" label="id">
                    <template slot-scope="scope">
                       <span>{{scope.row.id}}</span>
                    </template>
                </el-table-column>
                 <el-table-column  prop="avatarUrl" label="票务平台">
                    <template slot-scope="scope">
                       <span v-if="scope.row.type==1">自我游</span>
                       <span v-if="scope.row.type==2">天时同城</span>
                       <span v-if="scope.row.type==3">银科环企</span>
                       <span v-if="scope.row.type==4">票付通</span>
                    </template>
                </el-table-column>
                     <el-table-column  prop="avatarUrl" label="商务ID">
                    <template slot-scope="scope">
                       <span>{{scope.row.info_id}}</span>
                    </template>
                </el-table-column>
                  <el-table-column  prop="avatarUrl" label="标题">
                    <template slot-scope="scope">
                        <span>{{scope.row.goods_name}}</span>
                    </template>
                </el-table-column>
                 <!-- <el-table-column  prop="avatarUrl" label="是否可退款">
                    <template slot-scope="scope">
                        <span v-if="scope.row.id_card==1">可退款</span>
                        <span v-if="scope.row.id_card==2">不可退款</span>
                    </template>
                </el-table-column> -->
                 <!-- <el-table-column  prop="avatarUrl" label="是否需要身份证">
                    <template slot-scope="scope">
                        <span v-if="scope.row.refund==1">需要</span>
                        <span v-if="scope.row.refund==2">不需要</span>
                    </template>
                </el-table-column> -->
                 <!-- <el-table-column  prop="avatarUrl" label="是否需要审核">
                    <template slot-scope="scope">
                        <span v-if="scope.row.refund_check==1">需要</span>
                        <span v-if="scope.row.refund_check==2">不需要</span>
                    </template>
                </el-table-column> -->
                
                 <el-table-column  prop="avatarUrl" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showdialog(scope.row.id ,scope.row.type)">编辑</el-button>
                        <el-button type="danger" size="mini"  @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
              </el-table>
              <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.ticketingmer.pagination.page"
            :page-sizes="tableFormatData.ticketingmer.pagination.pagesizes"
            :page-size.sync="tableFormatData.ticketingmer.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData?tableFormatData.ticketingmer.pagination.total : 0"
          >
          </el-pagination>
        </div>
         </div>
    </div>
    </div>
</template>
<script>
import {ticketGoodsGet,ticketSave,ticketGoodsSave,ticketGoodsDelete,ticketGoodsDetail,getTicket} from '@/api/cloudservice'
import mixins from '@/mixins/mixins'
export default {
    mixins: [mixins.getters('Table'),mixins.getters('Form')],
    name:'ticketingmer',
    data(){
        return{
            tableridata:[],
            dialogFormVisible:false,
            formFormatData: {
                key: 'ticketingmer',
                model: {
                noCreateEdit: false,
                bindDialog: 'dialogFormVisible'
                },
                api: {
                editForm: {// 编辑回填
                    api: ticketGoodsDetail,
                    params: {
                    id: this.id
                    },
                    redirect: 'id'
                },
                submitForm: ticketGoodsSave,
                },
                formData: {
                    type:'',
                    ticket_id:'',
                    goods_name:'',
                    info_id:'',
                    id_card:2,
                    n:'',
                    refund:2,
                    // real_name:2,
                    // pre_sale:2,
                    // pre_sale_time_start:'',
                    // pre_sale_time_end:'',
                    // express:2
                },
                rules: {
                type: [{
                    message: '请选择门票类型',
                    required: true,
                    trigger: 'change'
                }],
                ticket_id:[{
                      message: '选择商家',
                    required: true,
                    trigger: 'change'
                }],
                goods_name:[{
                     message: '请填写商家编号',
                    required: true,
                    trigger: 'change'
                }],
                info_id:[{
                   message: '请填写url',
                    required: true,
                    trigger: 'change' 
                }],
                 n:[{
                   message: '请填写产品ID',
                    required: true,
                    trigger: 'change' 
                }],
                name:[{
                    message: '请填写商家',
                    required: true,
                    trigger: 'change' 
                }]
                }
            },
            tableFormatData: {
                current: 'ticketingmer',
                ticketingmer: {
                key: 'ticketingmer',
                api: {
                    getList: ticketGoodsGet
                },
                tableData: [],
                files: {
                    ids: [],
                    checkall: '0',
                    live_state: 'all',
                    info_id:'',
                    goods_name:'',
                },
                pagination: {
                    page: 1,
                    list_rows: 10,
                    pagesizes: [10, 20, 50],
                    total: 0
                }
                }
            }
        }
    },
    methods:{
        savebtn(){
            console.log("hshshssh",this.formFormatData.formData)
            this.formFormatSubmit()
           
        },
        getTicketbtn(val){
            console.log("ressssaaaaaaaaaaaaaaa",val)
            getTicket({type:val}).then(res=>{
                console.log("sssssssssssssssssss",res)
                this.tableridata = res.data.data

            })
            //如果选择天时同城，清空商家中的值
            if(val==2){
                this.formFormatData.formData.ticket_id = ''
            } 
            // 应后端需求，是票付通的时候才传n过去，否则不传n  
            // 如果选择票付通，删除产品ID的值
            if(val!=4){
            delete this.formFormatData.formData.n
            }   
            if(val==4){
                //如果等于票付通，就把属性n添加到this.formFormatData.formData下面
                if(!!this.formFormatData.formData.n){
                    Object.defineProperty(this.formFormatData.formData, "n", {
                                value : "",
                                writable : true,
                                enumerable : true,
                                configurable : true
                            });
                               //添加的属性不是响应式的，所以下面操作吧数据变成响应式的
                this.formFormatData.formData={...this.formFormatData.formData}
                }
            
             
            }
            console.log("dddssssssss",this.formFormatData.formData)

        },
        showdialog(params,type) {
                this.dialogFormVisible= true
                    ticketGoodsDetail({id:params}).then(res=>{
                        this.formFormatData.formData = res.data.data
                    })
                      getTicket({type:type}).then(res=>{
                console.log("sssssssssssssssssss",res)
                this.tableridata = res.data.data

            })
            },
            handleDelete(index) { // 删除
                this.$confirm('此操作将删除此行数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ticketGoodsDelete({ id: index }).then(res => {
                    const { code } = res.data
                    code == 1 && this.$message.success('操作成功')
                    this.filesSerch()
                    })
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                    })
                })
                },
            },
}
</script>
